<template>
	<view>
		<view class="plr-36 ptb-10" v-if="img">
			<image :src="img" class="radius-15 w100" mode="widthFix"></image>
		</view>
		<!-- 列表 -->
		<filterList @changeTab="changeTab" :list="list"></filterList>
		<u-loadmore v-show="list.length>9" :status="status" icon-type="flower" bg-color="transperant" margin-top="30"
		 margin-bottom="30" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: 0,
				cat_id: '',
				cat_name: '',
				img:'',
				list: [],
				status: 'loadmore',
				page: 1,
			};
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.getList()
		},
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.getList()
		},
		onLoad(option) {
			this.cat_id = option.cat_id
			this.cat_name = option.cat_name
			this.img = option.img;
			uni.setNavigationBarTitle({
				title: this.cat_name
			})
			// this.getList()
		},
		methods: {
			changeTab(tab) {
				this.tab = tab
				this.page = 1
				this.list = []
				this.status = 'loadmore'
				this.getList()
			},
			getList() {
				this.status = "loading";
				this.$http('/api/shop/shop_list', {
					category_id: this.cat_id,
					type: this.tab + 1,
					page: this.page
				}).then(data => {
					if (data.length < 10) {
						this.status = "nomore"
					} else {
						this.page = this.page + 1
						this.status = "loadmore"
					}
					this.list = this.list.concat(data)
					uni.stopPullDownRefresh();
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
